<!-- 编辑器页面 -->
<template>
  <div class="editor-page">
    <quill-editor
      class="editor"
      ref="myTextEditor"
      v-model="html"
      :options="editorOption"
      @change="onEditorChange($event)"
      :spellcheck="spellcheck"
      :key="spellcheck"
    >
    </quill-editor>
    <div class="editor-operation">
      <div class="editor-operation-left">
        <span>语法检查: </span>
        <my-swicth v-model="spellcheck" text="开|关"></my-swicth>
      </div>
      <div class="editor-operation-right">
        <span @click="saveContent" class="editor-operation-button" style="color: red;">保 存</span>
        <span @click="cancelContent" class="editor-operation-button">取 消</span>
      </div>
    </div>
  </div>
</template>
<script>
// 引入编辑器样式
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
// 代码高亮
import hljs from 'highlight.js';
import 'highlight.js/styles/monokai-sublime.css';
// 汉化
import '@/assets/css/quill.editor.css';
// 显示悬停文字
import { addQuillTitle } from '@/common/quill-title.js';
// 组件
import MySwicth from '@/components/mySwitch/MySwicth.vue';
// 进程通信
const { ipcRenderer } = window.electron;
export default {
  name: 'Editor',
  data() {
    return {
      id: '',
      html: '',
      text: '',
      spellcheck: true,
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'], // 链接、图片、视频
          ], // 工具菜单栏配置
          syntax: {
            highlight: (text) => {
              return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方
            },
          },
        },
        placeholder: '请在这里添加内容', // 提示
        readOnly: true, // 是否只读
      },
    };
  },
  components: { MySwicth },
  mounted() {
    ipcRenderer.on('message', (id) => {
      this.id = id;
      let data = this.db('data')
        .get('RECORDS')
        .find({ id: this.id })
        .value();
      this.html = data.html;
      this.text = data.text;
      this.spellcheck = data.spellcheck;
    });
    addQuillTitle();
  },
  watch: {},
  methods: {
    // 值发生变化
    onEditorChange(editor) {
      this.html = editor.html;
      this.text = editor.text;
    },
    saveContent() {
      if (this.html) {
        const collection = this.db('data').get('RECORDS');
        let text = this.text;
        let html = this.html;
        let spellcheck = this.spellcheck;
        let temp = text.substring(0, text.indexOf('\n'));
        let title = temp? temp : `幻影签${new Date().getTime()}`;
        let time = new Date().getTime();
        if (this.id) {
          // id不为空时编辑页
          collection.updateById(this.id, { title, html, text, spellcheck, updateTime: time }).write();
        } else {
          // id为空时新增页,status: -1:删除, 1:正常
          collection.insert({ 
            title, 
            html, 
            text, 
            time, 
            spellcheck, updateTime: 
            time,
            isComplete: false,
            status: 1 
          }).write();
        }
        ipcRenderer.send('editorWindow', { message: 'save' });
        ipcRenderer.send('editorWindow', { message: 'close', key: this.id ? this.id : 'unique' });
      } else {
        this.$toast.show('内容为空', 1800);
      }
    },
    cancelContent() {
      ipcRenderer.send('editorWindow', { message: 'close', key: this.id ? this.id : 'unique' });
    },
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor;
    },
  },
};
</script>

<style>
.editor {
  box-sizing: border-box;
  height: 90vh;
  display: flex;
  flex-direction: column;
}
.editor-page .ql-container {
  flex: 1;
  overflow: hidden;
}
.editor-operation {
  box-sizing: border-box;
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4vh;
}
.editor-operation-left {
  display: flex;
  justify-content: center;
  align-items: center;
}
.editor-operation-right {
  font-size: 12px;
}
.editor-operation-button {
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 8px;
  margin-left: 4vh;
}
.editor-operation-button:first-child:hover {
  color: #fff !important;
  background: red !important;
  border: 1px solid red;
}
.editor-operation-button:last-child:hover {
  color: red !important;
  border: 1px solid red;
}
</style>
